2025年9月3日日本語

CSSモーションパスセグメントを制御して、高度なWebアニメーションを実現しましょう。このガイドでは、offset-path、offset-distance、およびキーフレームのテクニックについて説明します。

CSSモーションパスセグメントのマスター：パス部分アニメーションの徹底解説

Webデザインと開発が進化し続ける中で、モーションはユーザーエクスペリエンスにとって重要な言語になりました。モーションは注意を引き、フィードバックを提供し、静的なインターフェースでは不可能な方法でストーリーを伝えます。長年、複雑なモーションには、大規模なJavaScriptライブラリや専用のアニメーションツールが必要でした。しかし、CSSモーションパスモジュールは、強力なネイティブソリューションとして登場し、開発者はスタイルシートで直接カスタム定義されたパスに沿って要素をアニメーション化できます。これは、パフォーマンスが高く宣言的なアニメーションを作成するためのゲームチェンジャーです。

ほとんどのチュートリアルでは、パスの全体に沿って、最初から最後まで要素をアニメーション化することでモーションパスを紹介しています。しかし、あなたの創造的なビジョンがより多くのニュアンスを要求する場合はどうなるでしょうか？オブジェクトを複雑な形状の1つのカーブに沿って移動させ、一時停止してから別のセグメントに沿って続行する必要がある場合はどうなるでしょうか？ここに真の習得があります。パスだけでなく、旅の特定の部分を制御することです。

この包括的なガイドは、基本を超えたい世界中の開発者とデザイナー向けです。CSSモーションパスの特定のセグメントに沿って要素をアニメーション化するために必要なテクニックを分析し、JavaScriptを1行も記述せずに、振り付けされ表現力豊かなWebアニメーションの新しいレベルを開きます。

基礎：CSSモーションパスの簡単なツアー

セグメントを制御する前に、モーションパスを機能させるコアプロパティをしっかりと理解しておく必要があります。すでに慣れている場合は、簡単な復習と考えてください。初めての場合は、これが不可欠な出発点です。

コアプロパティ

CSSモーションパスレベル1の仕様では、要素の動きを定義および制御するために連携して機能するプロパティのセットを定義しています。最も重要なものは次のとおりです。

offset-path：これはモジュールの中心です。要素がたどる幾何学的パスを定義します。それを定義する最も一般的で強力な方法は、SVGパスデータ文字列を受け入れるpath()関数を使用することです。つまり、ベクターグラフィックスエディター（Illustrator、Inkscape、Figmaなど）で複雑なパスを設計し、SVGパスデータをコピーしてCSSに直接貼り付けることができます。
offset-distance：これをアニメーションのプログレスバーと考えてください。offset-pathに沿った要素の位置を指定します。0%の値は、パスの先頭に要素を配置し、100%は最後に配置します。このプロパティをアニメーション化すると、モーションが作成されます。
offset-rotate：このプロパティは、要素がパスに沿って移動するときの要素の向きを制御します。デフォルトでは、要素は回転しません。autoに設定すると、要素のベースラインがパスの方向に自動的に向き、道路上の車や空の飛行機などに最適です。auto 90degのような角度を追加して、要素をパスの方向に垂直にすることもできます。
offset-anchor：これは、要素自体のどのポイントをパスに固定するかを定義します。デフォルトはautoで、50% 50%または要素の中心と同等です。他の座標（たとえば、左上隅の0% 0%）を指定して、要素が軌道にどのように「固定」されるかを変更できます。

簡単な「フルパス」アニメーションの例

これらのプロパティが動作する古典的な例を見てみましょう。単純な曲線パスの最初から最後までオブジェクトをアニメーション化します。これにより、セグメント制御に進む前に、ベースラインが確立されます。

            
<!-- HTML Structure -->
<div class="scene">
  <div class="dot"></div>
</div>

<style>
  .scene {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 2em auto;
  }

  .dot {
    width: 20px;
    height: 20px;
    background-color: dodgerblue;
    border-radius: 50%;
    offset-path: path('M 20,100 C 50,20 250,20 280,100');
    animation: move-along-full-path 4s infinite linear;
  }

  @keyframes move-along-full-path {
    from {
      offset-distance: 0%;
    }
    to {
      offset-distance: 100%;
    }
  }
</style>

この例では、.dot要素に曲線状のoffset-pathが割り当てられています。次に、move-along-full-pathアニメーションは、offset-distanceを4秒かけて0%から100%に操作します。これは標準的な基本的なユースケースです。しかし、私たちの目標は、この単純な最初から最後のパラダイムから解放されることです。

コアの課題：特定のパスセグメントのアニメーション化

現実の世界は、単純なAからZへの道のりであることはめったにありません。都市の公共交通機関のWebサイトにある地下鉄の地図を想像してください。都市ネットワーク全体で電車をアニメーション化するのではなく、2つの特定の駅間の移動を表示する必要があります。または、デバイスの画面からカメラレンズにユーザーの注意を引くインタラクティブな製品ツアーを検討してください。これは、デバイスの輪郭を描く事前に定義されたパスに沿って20％から35％に移動することを表している可能性があります。

これらのシナリオは、粒度の細かい制御の必要性を強調しています。アニメーションに次のことを指示する方法が必要です。

パスに沿った任意のポイントから開始します（例：25％）。
別の任意のポイントで終了します（例：80％）。
アニメーションの全期間にわたってこの部分的な移動を実行します。

ここでは、CSSキーフレームのより深い理解が役立つだけでなく、不可欠になります。魔法は、新しい未発見のCSSプロパティにあるのではなく、すでに知っている@keyframesルール内のoffset-distanceプロパティの戦略的な操作にあります。

解決策：キーフレームによる粒度の細かい制御

パス部分アニメーションの鍵は、@keyframesブロック内のfromおよびto（または0%および100%）マーカーが、必ずしもモーションパスの開始と終了を意味するわけではないアニメーション自体のタイムラインを参照することに気づくことです。これらのマーカーに任意のoffset-distance値を割り当てることができます。

テクニック1：基本的なセグメントのアニメーション化

前の例を適応させましょう。ドットをパス全体に沿って移動させる代わりに、中央のセクション、具体的には25％マークから75％マークまでのみ移動させます。

            
<!-- HTML is the same -->
<div class="scene">
  <div class="dot-segment"></div>
</div>

<style>
  /* .scene styles are the same */
  .scene {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 2em auto;
  }

  .dot-segment {
    width: 20px;
    height: 20px;
    background-color: crimson;
    border-radius: 50%;
    /* The same path as before */
    offset-path: path('M 20,100 C 50,20 250,20 280,100');
    
    /* Set initial position if needed */
    offset-distance: 25%;

    /* Animate with new keyframes */
    animation: move-along-segment 4s forwards;
  }

  @keyframes move-along-segment {
    from {
      offset-distance: 25%;
    }
    to {
      offset-distance: 75%;
    }
  }
</style>

重要な変更点を分析しましょう。

キーフレーム：0%から100%にアニメーション化する代わりに、move-along-segmentキーフレームは、移動の開始点と終了点をそれぞれoffset-distance: 25%およびoffset-distance: 75%として明示的に定義します。
animation-fill-mode: forwards;：これは非常に重要です。このプロパティは、アニメーションが完了すると、要素が最後のキーフレーム（toまたは100%）のスタイルを保持する必要があることをブラウザに指示します。forwardsがない場合、4秒のアニメーションが終了した後、ドットはアニメーションが適用される前の初期状態に戻ります。それを使用することで、ドットが25％から75％にアニメーション化され、75％マークにとどまることを保証します。
初期状態（オプションですが良い習慣）：要素に直接offset-distance: 25%;を設定すると、アニメーションが開始される前でも、要素が正しい位置から開始されることが保証されます。

この簡単な変更により、基本的なテクニックが利用できるようになりました。アニメーションの合計期間である4秒は、パスの長さの50％（25％から75％）の移動に適用されるようになり、モーションの範囲と速度を正確に制御できます。

テクニック2：マルチステージジャーニーの振り付け

より高度で実用的なシナリオ：一時停止のあるマルチステージアニメーションを作成します。これは、ガイド付きツアー、ストーリーテリング、または段階的な指示に最適です。次の振り付けでアニメーションを作成しましょう。

ステージ1：開始（0％）から40％マークに移動します。
ステージ2：40％マークで少し一時停止します。
ステージ3：40％マークから最後の90％マークに移動し続けます。

これを実現するには、キーフレームのパーセンテージを使用して、ストーリーをアニメーションのタイムラインにマッピングする必要があります。アニメーションの合計期間が10秒だとしましょう。次のように時間を割り当てることができます。

最初の動き（4秒）：アニメーションのタイムラインの最初の40％を使用します（0％から40％のキーフレーム）。
一時停止（2秒）：タイムラインの次の20％を使用します（40％から60％のキーフレーム）。
2番目の動き（4秒）：タイムラインの最後の40％を使用します（60％から100％のキーフレーム）。

次に、コードにどのように変換されるかを示します。

            
@keyframes multi-stage-journey {
  /* Stage 1: Move from 0% to 40% of the path */
  /* This happens during the first 40% of the animation's duration */
  0% {
    offset-distance: 0%;
  }
  40% {
    offset-distance: 40%;
  }

  /* Stage 2: Pause */
  /* Hold the position at 40% of the path */
  /* This happens between 40% and 60% of the animation's duration */
  60% {
    offset-distance: 40%;
  }

  /* Stage 3: Move from 40% to 90% of the path */
  /* This happens during the final 40% of the animation's duration */
  100% {
    offset-distance: 90%;
  }
}

.dot-multi-stage {
  /* ... other styles ... */
  animation: multi-stage-journey 10s forwards;
}

一時停止の鍵は、同じoffset-distance値を持つ2つの隣接するキーフレームマーカー（40%と60%）を持つことです。アニメーションのタイムラインの40％から60％の間の時間、`offset-distance`は変化せず、動きに完全に一時停止を作成します。このテクニックを使用すると、アニメーションのペースとリズムをディレクターレベルで制御できます。

プロのワークフロー向けの高度なテクニック

基本を習得することは素晴らしいことですが、プロの開発には、保守可能で動的でアクセス可能なソリューションが必要です。高度なテクニックをいくつか見てみましょう。

CSSカスタムプロパティ（変数）を使用した動的セグメント

キーフレームに25%や75%などの値をハードコーディングすることは機能しますが、柔軟性があまりありません。CSSカスタムプロパティを使用すると、アニメーションセグメントを動的に定義できるため、コードの再利用性が向上し、特にJavaScriptでの更新が容易になります。

            
.element-dynamic {
  /* Define the segment endpoints as variables */
  --segment-start: 15%;
  --segment-end: 85%;

  offset-path: path('...');
  animation: move-dynamic-segment 5s forwards;
}

@keyframes move-dynamic-segment {
  from { 
    offset-distance: var(--segment-start);
  }
  to {
    offset-distance: var(--segment-end);
  }
}

このアプローチは非常に強力です。たとえば、同じアニメーションを使用しているが、開始変数と終了変数が異なる複数の要素を持つことができます。または、JavaScriptを使用して、マップ上の旅のさまざまな部分を表示するために異なるボタンをクリックするなど、ユーザーの操作に応じて--segment-startと--segment-endを更新できます。

`animation-timing-function`を使用したセグメントごとのイージング

モーションは位置だけではありません。それはキャラクターについてです。イージング（時間の経過に伴うパラメータの変化率）は、アニメーションに個性を与えます。一般的な誤解は、animation-timing-functionプロパティがアニメーション全体にのみ適用されるということです。ただし、キーフレーム内で宣言して、そのキーフレームに至るまでのトランジションに影響を与えることができます。

マルチステージの旅を洗練しましょう。最初の動きを加速し（イーズイン）、一時停止を静的にし、2番目の動きを緩やかに停止するように減速させたい（イーズアウト）。

            
@keyframes multi-stage-eased-journey {
  0% {
    offset-distance: 0%;
    animation-timing-function: ease-in;
  }
  40% {
    offset-distance: 40%;
    /* This timing function applies to the pause */
    animation-timing-function: linear; 
  }
  60% {
    offset-distance: 40%;
    /* This timing function applies to the next movement */
    animation-timing-function: ease-out;
  }
  100% {
    offset-distance: 90%;
  }
}

0%、40%、および60%キーフレームでタイミング関数を指定することにより、アニメーションのそれぞれのフェーズのイージングを指示します。0〜40％の移動、40〜60％の一時停止、60〜100％の移動。このレベルの制御により、洗練された自然な感じのモーションを作成できます。

アクセシビリティ優先：`prefers-reduced-motion`

グローバルオーディエンスを持つプロとして、包括的なエクスペリエンスを構築する責任があります。一部のユーザー、特に前庭障害のあるユーザーの場合、大規模なアニメーションはめまい、吐き気、その他の深刻な問題を引き起こす可能性があります。CSSは、prefers-reduced-motionメディアクエリを使用してユーザーの好みを尊重する簡単で効果的な方法を提供します。

常に、モーションの軽減を要求するユーザーに代替手段を提供するようにモーションパスアニメーションをラップします。

            
/* Apply the animation by default */
.animated-element {
  animation: my-motion-path-animation 5s forwards;
}

/* Override it for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
    /* Optionally, you could replace it with a simple, non-distracting fade-in */
    /* opacity: 0; */
    /* animation: fade-in 1s forwards; */
  }
}

この小さな追加は、視聴者のかなりの部分にとって大きな違いをもたらします。これは、最新の責任あるWeb開発の不可欠な部分です。

実用的なアプリケーションとグローバルユースケース

理論は価値がありますが、これらのテクニックを国際的に理解されている実用的なシナリオに結び付けましょう。

eコマース：製品機能のハイライト

新しいグローバルスマートフォンの製品ページを想像してください。静的な箇条書きの代わりに、デバイスのシルエットをトレースするoffset-pathを定義できます。次に、アニメーション化されたホットスポットが、画面の端（例：10％〜30％）から移動し、新しいカメラシステムで一時停止し（30％で保持）、カーブに沿って高速充電ポートをハイライトし続けます（40％〜60％）。これにより、ダイナミックで魅力的で有益な製品ツアーが作成されます。

輸送とロジスティクス：旅の視覚化

国際的な運送会社、航空会社、または旅行ブログにとって、ルートの視覚化は重要です。飛行機または船のアイコンを世界の地図に沿ってアニメーション化できます。セグメントアニメーションを使用すると、東京からシンガポールへのフライト（セグメント1）を表示し、アニメーションを一時停止して乗り継ぎを表示し、シドニーへの接続フライト（セグメント2）をアニメーション化できます。これにより、言語の壁を超える明確な視覚的なストーリーテリングが提供されます。

ユーザーインターフェイスのフィードバック：ユーザーの誘導

ユーザーがアクションを完了すると、明確なフィードバックが不可欠です。ユーザーがWebアプリケーションで「保存」ボタンをクリックしたとします。小さなチェックマークアイコンが、ボタンからステータスメッセージ領域（例：「ドキュメントが保存されました」）まで、微妙な円弧に沿ってアニメーション化される可能性があります。このセグメントアニメーションは、ユーザーのアクションをアプリケーションの反応にエレガントに接続し、ユーザビリティを向上させ、より洗練されたユーザーエクスペリエンスを作成します。

ブラウザの互換性と最後の考え

CSSモーションパスは最新のWeb標準です。この記事の執筆時点では、Chrome、Firefox、Safari、Edgeなど、主要なエバーグリーンブラウザすべてで優れたサポートが提供されています。ただし、グローバル開発者は常にCanIUse.comのようなリソースを参照して、最新の互換性情報を取得することをお勧めします。特に、特定のリージョンで古いブラウザバージョンをサポートする必要がある場合は。

パスの一部に沿ってアニメーションを制御する機能により、CSSモーションパスモジュールは目新しさから、プロのフロントエンド開発者およびモーションデザイナーにとって不可欠なツールになります。外部ライブラリのオーバーヘッドなしに、パフォーマンスが高くハードウェアアクセラレーションされた、複雑で振り付けられた意味のあるアニメーションを作成できます。

結論

CSSモーションパスの基本から、セグメント制御のニュアンスのあるアートまでを旅してきました。コアのレッスンは、CSS @keyframes内でoffset-distanceを戦略的に操作することで、要素の移動を正確に制御できるということです。単純な最初から最後のトリップに限定されなくなりました。

基本的なセグメントアニメーションを習得し、一時停止のあるマルチステージの旅を振り付け、CSSカスタムプロパティやセグメントごとのイージングなどの高度なテクニックを活用することで、よりダイナミックで表現力豊かで保守可能なアニメーションを構築できます。また、prefers-reduced-motionで常にアクセシビリティを最優先にすることで、美しい作品がすべてのユーザーにとって包括的で敬意を払うものになるようにします。

Webはモーションのキャンバスです。これで、より用途が広く強力なブラシを手に入れることができます。実験し、素晴らしいものを構築し、CSSで可能なことの境界を押し広げ続けてください。